<template>
	<view>
		<p-navbar title="" title="我的社区"></p-navbar>
		<view class="panel" v-for="(item,index) in raring" :key="index">
			<view class="panel-content">
				<view class="position">
					<text>{{item.title}}</text>
				</view>
				<view class="flex justify-between align-items text2">
					<text class="flex-text">{{rolva(sel[item.key1],index)}}</text>
					<text class="flex-text">{{rolva(sel[item.key2],index)}}</text>
					<text class="flex-text">{{rolva(sel[item.key3],index)}}</text>
				</view>
				<view class="flex justify-between align-items text3">
					<text class="flex-text">{{item.keyname1}}</text>
					<text class="flex-text">{{item.keyname2}}</text>
					<text class="flex-text">{{item.keyname3}}</text>
				</view>
				<view class="" v-if="index=='1'">
					<view class="flex justify-between align-items text2" style="margin-top: 20rpx;">
						<text class="flex-text">{{poster(sel[item.key4])}}</text>
						<text class="flex-text">{{poster(sel[item.key5])}}</text>
						<text class="flex-text">{{poster(sel[item.key6])}}</text>
					</view>
					<view class="flex justify-between align-items text3">
						<text class="flex-text">{{item.keyname4}}</text>
						<text class="flex-text">{{item.keyname5}}</text>
						<text class="flex-text">{{item.keyname6}}</text>
					</view>
				</view>
			</view>
		</view>
		<!-- 列表 -->
		<view class="list-title flex align-items">
			<view class="list-title1" @tap="shows=true" :style="shows&&'color: #333; font-size: 32rpx;'">
				直推列表
			</view>
			<view class="list-title1" @tap="shows=false" :style="!shows&&'color: #333; font-size: 32rpx;'">
				佣金明细
			</view>
			<view class="list-title1" style="margin-left: auto;" v-if="!shows"  @click="show = true">
				<image style="width: 26rpx; height: 28rpx;" src="../../static/user/select.png" mode=""></image>
			</view>
		</view>
		<u-select v-model="show" :list="selectList" @confirm="confirm"></u-select>
		<!-- 直推列表 -->
		<scroll-view :scroll-top="scrollTop" scroll-y="true" class="main" v-if="shows" @scrolltolower="scrolltolower">
			<!-- 题目 -->
		     <view class="title"><view class="title-child" v-for="item in list" :key="item">{{item}}</view></view>
		     <!-- 内容 -->
		     <view class="titles" v-for="(item,index) in list_item" :key="index" @tap="nav(item)">
		     	<view class="title-child">{{tings(item.userName)}}</view>
		     	<view class="title-child">{{starts(item.memberGradeId)}}</view>
		     	<view class="title-child">{{item.teamCount}}</view>
		     	<view class="title-child">{{item.validCount}}</view>
		     	<view class="title-child" :class="{show:item.memberGradeId=='1'}">{{item.memberGradeId=='0'?'未激活':'激活'}}</view>
		     </view>
		     <hide v-if="list_item.length==0" />    
		</scroll-view>
		<!-- 佣金明细 -->
		<scroll-view :scroll-top="scrollTop" scroll-y="true" class="main" v-else @scrolltolower="scrolltolower">
			 <view class="details-list flex align-items">
			 	<view class="details-item" v-for="item in 3" :key="item">
			 		<view class="item-text">
			 			{{item=='1'?'数量':item=='2'?'类型':'时间'}}
			 		</view>
			 	</view>
			 </view>
			 <view class="wallet" v-for="(item,index) in detailsList" :key="index">
			 	<view class="wallet-item" :class="{'color-fall':poster(item.balance)<0}">{{poster(item.balance)}}</view>
			 	<view class="wallet-item">{{types(item.type)}}</view>
			 	<view class="wallet-item">{{item.createTime}}</view>
			 </view>
			 <hide v-if="detailsList.length==0" />
		</scroll-view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				// 账户 状态 团队人数 直推人数 注册时间
				list: ['账户', '状态', '团队人数', '直推人数', '等级'],
				list_item: [],
				scrollTop:0,
				show: false,
				shows: true,
				selectList: [
					{
						value: '1',
						label: '直推奖'
					},
					{
						value: '2',
						label: '团队奖'
					},
					{
						value: '3',
						label: '平级奖'
					}
				],
				detailsList:[],//资产明细记录
				page:'1',
				sel:{},//新增人数
				raring:[
					{
						title:'邀请奖励',
						key1:'todayNum',
						keyname1:'今日新增用户',
						key2:'rejectNum',
						keyname2:'累计直推用户',
						key3:'totalNum',
						keyname3:'累计团队用户',
					},
					{
						title:'激活奖励',
						key1:'todayActivateNum',
						keyname1:'今日激活用户',
						key2:'rejectActivateNum',
						keyname2:'直推激活用户',
						key3:'totalActivateNum',
						keyname3:'累计激活用户',
						key4:'todayUserPrice',
						keyname4:'今日激活收益',
						key5:'rejectUserPrice',
						keyname5:'直推激活收益',
						key6:'totalUserPrice',
						keyname6:'累计激活收益',
					},
					{
						title:'分佣奖励',
						key1:'todayOrderPrice',
						keyname1:'今日获得分佣',
						key2:'rejectOrderPrice',
						keyname2:'直推获得分佣',
						key3:'totalOrderPrice',
						keyname3:'累计获得分佣',
					}
				]
			}
		},
		computed: {
			types(){
				return t=>{
					if(t=='1' || t=='4'){
						return '直推'
					}else if(t=='2' ||t =='5'){
						return '团队'
					}else{
						return '平级'
					}
				}
			},
			tings(){//字符串截取
				return t=>{
					if(!t) return '无';
					if(t.length<=7) return t;
					return t.substring(0,3)+"***"+t.substring(t.length-3,t.length)
				}
			},
			starts(){//用户等级
				return t=>{
					if(!t) return '未激活';
					return t=='0'?'未激活':t=='1'?'普通用户':t=='2'?'精英':t=='3'?'白银':t=='4'?'黄金':t=='5'?'白金':t=='6'?'黑钻':t=='7'?'VIP':'SVIP'
				}
			},
			rolva(){
				return (t,i)=>{
					if(i=='2'){//分佣
						if(!t) return '0.0000'
						return this.util.decimal(t)
					}else{//人数
						if(!t) return '0'
						return t
					}
					
				}
			},
			poster() {
				return (t,fixed='4') => {
					return this.util.decimal(t)
				}
			},
			option() { //用户资产
				return this.$state.user
			},
			str(){
				return t=>{
					return t.substring(0,10)
				}
			}
		},
		onLoad() {
			
			// this.request('vip/getPyramidSale').then(res=>{//新增用户
			// 	this.sel=res.data.data
			// })
			this.request('vip/straightPushList').then(res=>{
				this.list_item=res.data.data || []
			})
			this.type()
		},
		watch:{
			detailsList(){
				this.$set(this.detailsList)
			},
			shows(val){//切换
			  if(val==false){
				  this.page=1;
				  this.direct()
			  }
			}
		},
		methods: {
			async type(){//新增用户
				let data=['getPyramidSale','getCommunityUser','getCommunityOrder']//为了快速获取数据
				for(let i=0;i<data.length;i++){
					let vip=await this.request(`vip/${data[i]}`).then(res=>{
						if(i=='0'){//以下这样子写 接口将全部返回 前端需要根据字段获取 其他都是无效字段
							this.sel.todayNum=res.data.data.todayNum//今日新增用户
							this.sel.rejectNum=res.data.data.rejectNum//累计直推用户
							this.sel.totalNum=res.data.data.totalNum //累计团队用户
						}if(i=='1'){
							this.sel.todayActivateNum=res.data.data.todayActivateNum//今日激活用户
							this.sel.rejectActivateNum=res.data.data.rejectActivateNum//直推激活用户
							this.sel.totalActivateNum=res.data.data.totalActivateNum//累计激活用户
							this.sel.todayUserPrice=res.data.data.todayUserPrice//今日激活收益
							this.sel.rejectUserPrice=res.data.data.rejectUserPrice//直推激活收益
							this.sel.totalUserPrice=res.data.data.totalUserPrice//累计激活收益
						}else{
							this.sel.todayOrderPrice=res.data.data.todayOrderPrice//今日获得分佣
							this.sel.rejectOrderPrice=res.data.data.rejectOrderPrice//直推获得分佣
							this.sel.totalOrderPrice=res.data.data.totalOrderPrice//累计获得分佣
						}
					})
					
				}
				this.$forceUpdate()
				console.log(this.sel)
			},
			scrolltolower(){
				console.log('下拉')
				if(this.shows==false){
					this.page++
					this.direct()
				}
			},
			confirm(e) {
				this.page=1;
				this.direct(e[0].value)
			},
			direct(e){
				let data='';
				if(e){//筛选
					data=`&type=${e}`//类型
				}
				this.request(`vip/rewardSubsidiaryList?pageSize=20&page=${this.page}`+data).then(res=>{//资产明细
					if(this.page==1){//防止筛选导致历史数据加上来
						this.detailsList=res.data.data
					}else{
						// console
					   this.detailsList.push(...res.data.data)	
					}
				})
			},
		},
	
	}
</script>

<style lang="scss">
	.panel {
		width: 678rpx;
		background-color: #fff;
		margin: 0 auto;
		border-radius: 16rpx;
		margin-top: 40rpx;
		.panel-content {
			padding: 50rpx 0rpx 30rpx;
			.position{
				position: absolute;
				left: 40%;
				margin-top: -80rpx;
				background-color: #F3C31B;
				padding: 10rpx 25rpx;
				border-radius: 16rpx;
				font-size: 28rpx;
				font-weight: bold;
				color: #FFFFFF;
			}
			.text1 {
				margin-bottom: 40rpx;
				font-weight: bold;
				color: #333;
				
			}

			.text2 {
				font-size: 40rpx;
				color: $light-color;
				margin-bottom: 10rpx;
			}

			.text3 {
				font-size: 26rpx;
				color: #333;
			}
		}
	}
	.main{
		height: 28vh;
		/* #ifndef H5*/
		height: 34vh;
		/*#endif*/
		// border: 1px solid red;
	}
	.list-title1 {
		margin: 40rpx 40rpx 20rpx;
		color: #999;
		font-size: 28rpx;
		font-weight: bold;
	}

	.hq {
		display: flex;
		justify-content: space-between;
		padding-left: 30rpx;
		background: #333;
		// height: 110rpx;
		font-size: 38rpx;
		font-family: PingFang SC;
		font-weight: bold;
		line-height: 52px;
		color: #000000;
	}

	.header {
		display: flex;
		justify-content: space-between;
		align-items: center;
		margin: 0rpx 30rpx;

		.header-child {
			width: 45%;
			text-align: center;
			line-height: 40rpx;
			padding: 10rpx 0rpx;
			border-radius: 12rpx;
			border: 1px solid red;
			margin-bottom: 20rpx;
		}
	}

	.title {

		font-size: 28rpx;
		font-family: PingFang SC;
		// font-weight: bold;
		// line-height: 36px;
		color: #999999;
		display: flex;
		justify-content: space-between;
		justify-items: center;
		margin: 0rpx 30rpx;
		line-height: 60rpx;
		width: 92%;
		border-bottom: 1rpx solid #E0E0E0;

	}

	.titles {
		font-size: 28rpx;
		font-family: PingFang SC;
		// font-weight: bold;
		color: #999999;
		display: flex;
		justify-content: space-between;
		justify-items: center;
		margin: 0rpx 30rpx;
		line-height: 50rpx;
		width: 92%;
		border-bottom: 1rpx solid #E0E0E0;

		.show {
			font-weight: bold;
			color: #b87b0b;

		}
	}
	
	.details-list{
		margin: 0 40rpx 15rpx;
		line-height: 70rpx;
		border-bottom: 1rpx solid #E6E6E6;
		.details-item{
			border-bottom: 1px solid  rgba(255, 255, 255, 0.15);
			.item-content{
				margin: 20rpx 0;
			}
			&:first-child{
				width: 30%;
			}
			&:nth-child(2){
				width: 25%;
			}
			&:last-child{
				width: 45%;
				text-align: right;
			}
		}
	}
	.wallet{
		@include flex;
		justify-content: space-between;
		line-height: 70rpx;
		margin: 0 40rpx ;
		border-bottom: 1rpx solid #E6E6E6;
		.wallet-item{
			&:first-child{
				width: 30%;
				color: $color-rise;
				font-weight: bold;
			}
			&:nth-child(2){
				width: 25%;
				// border: 1px solid red;
			}
			&:last-child{
				color: #333;
				width: 45%;
				text-align: right;
			}
		}
	}

	.title-child {
		width: 20%;
		text-align: center;
		line-height: 90rpx;
		color: #333;
		font-weight: 500;
	}
	// .title-child:nth-child(1) {
	// 	width: 20%;
	// }
	.title-child:nth-child(5) {
		// text-align: right;
	}

	.swiper-text {
		margin-top: 150rpx;
		text-align: center;
		font-size: 26rpx;
		font-family: PingFang SC;
		font-weight: 400;
		line-height: 36rpx;
		color: #999999;

		image {
			width: 186rpx;
			height: 201rpx;
			margin-bottom: 20rpx
		}
	}
	.flex-text{
		width: 33.33%;
		text-align: center;
	}
	// .flex-text:nth-child(2){
	// 	text-align: center;
	// }
	// .flex-text:nth-child(3){
	// 	text-align: right;
	// }
</style>
